<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="navbar-content">
        <view class="left-section" @tap="goBack">
          <image
            src="/static/icons/left_arrow.png"
            class="back-icon"
            mode="aspectFit"
          ></image>
        </view>
        <text class="navbar-title">解除绑定</text>
        <view class="placeholder"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 中间图片 -->
      <view class="image-container">
        <image
          src="/static/icons/hr/un_bind.png"
          class="unbind-image"
          mode="aspectFit"
        ></image>
      </view>

      <!-- 解除绑定按钮 -->
      <view class="button-container">
        <button class="unbind-button" @tap="handleUnbind">
          解除绑定
        </button>
      </view>

      <!-- 提示信息 -->
      <view class="tips-container">
        <text class="tips-title">若更换或离职公司:</text>
        <view class="tips-list">
          <view class="tip-item">
            <text class="tip-number">1.</text>
            <text class="tip-text">当前账号取消认证,如需进行招聘服务需要重新进行认证流程</text>
          </view>
          <view class="tip-item">
            <text class="tip-number">2.</text>
            <text class="tip-text">曾经发布过的职位与沟通过的联系人将会全部清空</text>
          </view>
          <view class="tip-item">
            <text class="tip-number">3.</text>
            <text class="tip-text">请务必谨慎更换或离职公司,一旦操作则不可逆转</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { company_user_unbind } from "@/api/user";

const userStore = useUserStore();

const goBack = () => {
  uni.navigateBack();
};

const handleUnbind = () => {
  uni.showModal({
    title: '确认解除绑定',
    content: '确定要解除与当前公司的绑定关系吗？此操作不可逆转！',
    confirmText: '确定解除',
    confirmColor: '#ff6b6b',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({
            title: '解除绑定中...',
            mask: true
          });
          
          // 调用解除绑定API
          await company_user_unbind();
          
          uni.hideLoading();
          
          // 显示成功提示
          uni.showToast({
            title: '解除绑定成功',
            icon: 'success'
          });
          
          // 提示用户重新登录
          setTimeout(() => {
            uni.showModal({
              title: '提示',
              content: '请您重新登录',
              showCancel: false,
              confirmText: '确定',
              success: async () => {
                // 调用登出API
                try {
                  await userStore.logoutRemoteAction();
                  // 跳转到登录页面
                  uni.reLaunch({
                    url: '/pages/loginRegister/loginRegister'
                  });
                } catch (error) {
                  console.error('登出失败:', error);
                  // 即使登出失败，也跳转到登录页面
                  uni.reLaunch({
                    url: '/pages/loginRegister/loginRegister'
                  });
                }
              }
            });
          }, 1500);
          
        } catch (error) {
          uni.hideLoading();
          uni.showToast({
            title: error.message || '解除绑定失败，请重试',
            icon: 'none'
          });
        }
      }
    }
  });
};
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 导航栏 */
.navbar {
  background-color: #fff;
  border-bottom: 1rpx solid #e6e6e6;
  /* 适配安全区域 */
  padding-top: var(--status-bar-height);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 88rpx;
  position: relative;
}

.left-section {
  display: flex;
  align-items: center;
  min-width: 80rpx;
  padding: 20rpx 0;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.placeholder {
  min-width: 80rpx;
}

/* 内容区域 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx;
  background-color: #fff;
}

/* 图片容器 */
.image-container {
  margin-bottom: 80rpx;
  display: flex;
  justify-content: center;
}

.unbind-image {
  width: 300rpx;
  height: 300rpx;
}

/* 按钮容器 */
.button-container {
  margin-bottom: 80rpx;
  width: 100%;
}

.unbind-button {
  width: 100%;
  height: 88rpx;
  background-color: #ff6b6b;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unbind-button:active {
  background-color: #ff5252;
}

/* 提示信息容器 */
.tips-container {
  width: 100%;
}

.tips-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.tip-item {
  display: flex;
  align-items: flex-start;
}

.tip-number {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  margin-right: 16rpx;
  min-width: 40rpx;
}

.tip-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  flex: 1;
}
</style>
